<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

        .inputAdd {
            height: 20px;
            width: 150px;
        }

        .inputForm {
            position: fixed;
            width: 500px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -250px;
            border: 1px solid;
            background-color: #dddddd;
            z-index: 50;
        }

        .overlay {
            position: fixed;
            background-color: #1b1616;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.6;
            z-index: 20;

        }

        .content {

        }
    </style>
</head>
<body>

<div class="inputForm hide">
    <div style="padding-left: 130px;padding-top: 50px" id="inputOne">
        <div>主机名：<input type="text" name="hostname" class="inputAdd" id="t1"></div>
        <br>
        <div>端&nbsp;&nbsp;&nbsp;口：<input type="text" name="port" class="inputAdd"></div>
    </div>
    <div style="padding-top: 140px;padding-right: 30px">
        <div style="float: right;"><input id="sure" type="button" value="确定" flg="1"></div>
        <div style="float: right;padding-right: 10px"><input id="cancel" type="button" value="取消"></div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="overlay hide"></div>

<div class="content">
    <div id="i1">
        <input type="button" value="添加">
    </div>
    <table border="1" width="400px">
        <thead>
        <tr>
            <th>hostname</th>
            <th>port</th>
            <th>edit</th>
            <th>del</th>
        </tr>
        </thead>
        <tbody id="body">
        <tr>
            <td target="hostname">1.1.1.1</td>
            <td target="port">22</td>
            <td class="edit">编辑</td>
            <td class="del">删除</td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.2</td>
            <td target="port">22</td>
            <td class="edit">编辑</td>
            <td class="del">删除</td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.3</td>
            <td target="port">22</td>
            <td class="edit">编辑</td>
            <td class="del">删除</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="jquery-1.12.4.js"></script>

<script>
    // 点击添加时显示模态框
    $('#i1 input').click(function () {
        $('.overlay,.inputForm').removeClass('hide');

    });
    // 点击确定，添加内容，隐藏模态框
    $('#sure').click(function () {
        // 获取输入内容
        var hostnameValue = $('#inputOne').find('[name="hostname"]').val();
        var portValue = $('#inputOne').find('[name="port"]').val();
        // 获取flg，判断是添加还是编辑
        var flg = $('#sure').attr('flg');
        if (flg == 1) {
            // 创建标签
            var tdHostname = document.createElement('td');
            $(tdHostname).attr('target', 'hostname');
            tdHostname.innerText = hostnameValue;
            var tdPort = document.createElement('td');
            $(tdPort).attr('target', 'port');
            tdPort.innerText = portValue;
            var editTag = '<td class="edit">编辑</td>';
            var delTag = '<td class="del">删除</td>';

            //创建tr标签
            var trTag = document.createElement('tr');
            // 在tbody里面添加tr标签
            var newTr = $('#body').append(trTag);
            //在新建的tr标签里面添加其他标签
            $(trTag).append(tdHostname);
            $(trTag).append(tdPort);
            $(trTag).append(editTag);
            $(trTag).append(delTag);
        } else if (flg == 2) {
            var indNum = $('#sure').attr('ind')
            $('#body').children().eq(indNum).find('[target="hostname"]').text(hostnameValue);
            $('#body').children().eq(indNum).find('[target="port"]').text(portValue);

        }
        $('.overlay,.inputForm').addClass('hide');
        $('.inputAdd').val("");     //清空脏数据
        $('#sure').attr('flg', '1'); //恢复默认flg
        $('#sure').removeAttr('ind');  //删除ind属性
    });

    //使未来的元素可编辑和删除
    $(document).on('click', function (e) {
        var tar = e.target;
        //console.log(tar);
        //点编辑时，显示模态框，并显示可编辑的值
        if ($(tar).hasClass('edit')) {
            var indNum = $(tar).parent().index();
            console.log(indNum)
            $('#sure').attr('ind', indNum);
            //设置flg的值-用于编辑
            $('#sure').attr('flg', 2);
            //弹出模态编辑框
            $('.overlay,.inputForm').removeClass('hide');
            //获取文本内容
            var tds = $(tar).prevAll();
            tds.each(function () {
                // 获取自定义属性值
                var tag = $(this).attr('target');
                //拼接字符串
                var temp = '[name="' + tag + '"]';
                //设置input框值
                $(temp).val($(this).text());

            })
        }else if ($(tar).hasClass('del')){   //删除按钮
            $(tar).parent().remove();
            $('.inputAdd').val("");     //清空脏数据
            $('#sure').attr('flg', '1'); //恢复默认flg
            $('#sure').removeAttr('ind');  //删除ind属性
        }
    })
    //点取消时，隐藏模态框
    $('#cancel').click(function () {
        $('.overlay,.inputForm').addClass('hide');
    })
    // 点删除时，删除表格的一行

</script>

</body>
</html>